/**
 * @author zhangqiang
 * @date   16/12/20
 */

import {
    prefix
    } from "../const/prefix";

import Select from "../components/form/Select.js"
import NoData from "../components/NoData.js"

(function(lf,r){
   let RC = r.createClass,
       ajax = lf.utils.ajax;

    const TEXT = 'text', CHOOSE = 'choose';

    let Portrait = RC({///头像
        componentWillMount(){//返回的是手机才能识别的图片地址
            lf.bridgeJs.registerHandler("getPhotoFromApp", function (data, cb) {
                $('#setPhoto').attr('src', data);
                imgs = data.toString();//上传图片时要用到
            });
        },
        clickFn(){
            selectPhoto(1);
        },
        render(){
            var imgUrl= '../public/images/common/none.png';
            return (
                <div className="mui-table-view-cell portrait">
                    <span className="title">上传图片</span>
                    <div className="mui-pull-right head-img">
                        <a href="javascript:;" ref="setPhoto" onTouchEnd={this.clickFn}>
                            <img className="mui-action-preview" id="setPhoto" src={''||imgUrl||this.props.imgUrl}/>
                        </a>
                    </div>
                </div>
            )
        }
    })

    var ChooseInput = RC({
        render: function () {
            var info = this.props.info;
            return (
                <div>
                    <div className="mui-input-row">
                        <label>{info.title}</label>
                        <Select addClass="select-input" ref='select' value={info.val} name={info.name}
                                groupCode={info.code}/>
                    </div>
                </div>
            )
        }
    });

    var InputContainer = RC({///输入框
        componentDidMount(){
            if (lf.utils.getSys() == "IOS") {
                $('.me-info').focus();
            }
        },
        componentDidUpdate(){
            if (lf.utils.getSys() == "IOS") {
                $('.me-info').focus();
            }
        },
        render: function () {
            var info = this.props.info;
            if (info.readonly == 'readonly' && !(info.val == '')) {
                var readonly = true
            }
            return (
                <div>
                    <div className="mui-input-row">
                        <label>{info.title}</label>
                        <input className="me-info" ref="inputText" id={info.name} readOnly={readonly}
                               placeholder={info.val}
                               type={info.type || 'text'}/>
                    </div>
                </div>
            )
        }
    });

    let Container= RC({
        dataList(){
            return [
                {
                    val: 1||this.state.name || ' ',
                    type: 'text',
                    name: 'name',
                    ref: 'name',
                    title: "编辑商品",
                }, {
                    val: 1||this.state.name || ' ',
                    type: 'text',
                    name: 'name',
                    ref: 'name',
                    title: "商品描述",
                }, {
                    val: 1||this.state.name || ' ',
                    type: 'text',
                    name: 'name',
                    ref: 'name',
                    title: "库存",
                }, {
                    val: 1||this.state.maritalStatus||'',

                    name: 'marital',
                    ref: 'marital',
                    title: '单价'
                }, {
                    val:1||this.state.name || ' ',
                    type: 'number',
                    name: 'name',
                    code: 'SEX',
                    ref: 'name',
                    title: "排序",
                }, {
                    val: 1||this.state.name || ' ',
                    code: 'MARITAL_STATUS',
                    type: 'number',
                    name: 'name',
                    ref: 'name',
                    title: "标签",
                },
            ]
        },
        render(){
            let info = this.dataList();
            let listData=info.map((data, index)=>{
                if(data.type == 'text'){
                    return <InputContainer key={index} info={data} ref="inputCtr"/>
                }else if(data.type == 'number'){
                    return <ChooseInput key={index} info={data} ref="inputCtr"/>
                }

            })
            return(
                <div className="finger-me-profile">
                    <div className="mask"></div>
                    <Portrait user={this.props.user}/>
                    <from className="mui-input-group">
                        {listData}
                    </from>
                    <div className="update-btn">
                        <button type="button" id="update" ref="update"
                                className="mui-btn mui-btn-primary mui-btn-block" onTouchEnd={this.update}>保存
                        </button>
                    </div>
                </div>
            )
        }
    })
    lf.bridgeJs.getUser(function (user) {
        r.render(
            <Container user={user}/>,
            document.getElementById('root'), ()=> {
                $('#root').css('background', '#ededed');
                $('.mask').hide(1000);
            }
        )
    })
})(liefeng,React)